<template>
	<view class="userBox">
		<!-- 顶部 -->
		<view class="user_top">
			<view class="portrait">
				<view class="portrait_img"><image :src="item.avatarUrl" mode="widthFix"></image></view>
				<view class="portrait_txt"><text>{{item.nickName}}</text></view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="user-nav">
			<view>
				<text>0</text>
				<text>收藏的店铺</text>
			</view>
			<view>
				<text>14</text>
				<text>收藏的商品</text>
			</view>
			<view>
				<text>18</text>
				<text>关注的商品</text>
			</view>
			<view>
				<text>80</text>
				<text>足迹</text>
			</view>
		</view>
		<view class="user-payment">
			<view style="border-bottom: 1rpx solid #ccc;padding: 10rpx 0;">我的订单</view>
			<view class="width">
				<view>
					<image mode="widthFix" src="../../static/my-icons/icon1.png"></image>
					<text>待付款</text>
				</view>
				<view>
					<image  mode="widthFix" src="../../static/my-icons/icon2.png"></image>
					<text>待收货</text>
				</view>
				<view>
					<image  mode="widthFix" src="../../static/my-icons/icon3.png"></image>
					<text>退款/退货</text>
				</view>
				<view>
					<image  mode="widthFix" src="../../static/my-icons/icon4.png"></image>
					<text>全部订单</text>
				</view>
			</view>
		</view>
		
		<view class="user_item">
			<view>收货地址</view>
			<view>
			<uni-icons type="right" size="18"></uni-icons>
			</view>
		</view>
		
		<view class="user_item">
			<view>联系客服</view>
			<view>
			<uni-icons type="right" size="18"></uni-icons>
			</view>
		</view>
		
		<view class="user_item" @click="revomUser">
			<view>退出登录</view>
			<view>
			<uni-icons type="right" size="18"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import{mapState,mapMutations}from 'vuex'
	export default {
		name:"my-user",
		data() {
			return {
				
			}
		},
		props:{
			item:{type:Object,default:{}}
		},
		methods:{
		...mapMutations('user',['updateaddres','setuserobj','setUserCode','setToken']),
		revomUser(){
			this.setUserCode(''),
			this.setuserobj({});
			this.setToken(''),
			this.updateaddres({});
		}
		},
		computed:{
			// ...mapState('user',['code','userobj','token','useraddres']),
		}
	}
</script>

<style lang="scss" scoped>
.user_top{position: relative;border-bottom:2px #ccc solid;height:360rpx;background-color:#c00000;color: #fff;}
.portrait{position: absolute;top:50%;left:50%;transform:translateX(-50%)translateY(-50%);display: flex;justify-content: space-around;flex-direction: column;align-items: center;}
.portrait_img{border:4rpx #fff solid;border-radius: 100%;height: 200rpx;width: 200rpx;overflow: hidden;image{width: 100%;}}
.portrait_txt{margin-top:20rpx;}
.user-nav{position: relative;border-radius: 10rpx;top:-32rpx;border:1rpx #ccc solid;display: flex;justify-content:space-around;height:128rpx;width:90%;margin: 0 auto;background-color:#fff;image{width: 100%;};view{display: flex;justify-content:space-around;flex-direction: column;align-items: center;}}
.user-payment{background-color: #fff;box-sizing: border-box;display:flex;justify-content:space-around;flex-direction: column;height: 228rpx;width:90%;margin: 0 auto;border-radius: 10rpx;padding:0 20rpx;}
.width{width: 100%;display: flex;justify-content:space-between;height:128rpx;margin: 0 auto;background-color:#fff;image{width: 100%;};view{display: flex;justify-content:space-around;flex-direction: column;align-items: center;}}
.user_item{box-sizing: border-box;width: 90%;text-indent:.5rem;border-radius:10rpx;line-height:78rpx;padding: 10rpx;margin: 14rpx auto 0;display: flex;justify-content:space-between;background-color: #fff;}
</style>
